import React, { useEffect, useState } from 'react';
import { query, getChart } from './service';
import { Bar } from '@ant-design/charts';

interface Props {
  chart_id: string;
  cloud: any[];
}

const Comp: React.FC<Props> = ({ chart_id, cloud }) => {
  const [data, setData] = useState<any>();
  const [config, setConfig] = useState<any>();
  useEffect(() => {
    (async () => {
      const chart: any = await query({ id: chart_id });
      if (chart?.data) {
        setData(chart?.data[0]);
        const chartData: any = await getChart(chart.data[0].chart_type, {
          id: `${chart_id}`,
          cloud,
        });
        if (chart?.data[0].chart_type === 'rank') {
          setConfig({
            data: chartData.data.data.splice(10),
            xField: 'key',
            yField: 'value',
            label: {
              position: 'middle',
              style: {
                fill: '#FFFFFF',
                opacity: 0.6,
              },
            },
          });
        }
      }
    })();
  }, []);
  return (
    <div>
      {data?.chart_type === 'rank' && config ? <Bar {...config} /> : null}
    </div>
  );
};

export default Comp;
